<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('operating.mapMode')" name="mapFirst">
        <div class="head areaSelect ">
          <el-row>
            <span>{{ $t("area.Layer") }}</span>
            <treeselect
              v-model="mapValue"
              :placeholder="$t('area.chosenLayer')"
              :max-height="300"
              :options="mapList"
              @input="handleMapChange"
            />
          </el-row>
          <el-row style="margin-top: 20px">
            <el-table :data="alarmDataList" border style="width: 100%;max-height:400px;overflow: auto;">
              <el-table-column
                prop="alarmName"
                :label="$t('alarm.AlarmName')"
              />
              <el-table-column :label="$t('operating.operating')" width="100">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="handleFenceAlarm(scope.$index, scope.row)"
                  >{{ $t("operating.handle") }}</el-button>
                  <el-button
                    type="text"
                    style="color: #f56c6c"
                    @click="handleDelete(scope.$index, scope.row)"
                  >{{ $t("operating.delete") }}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              v-show="addBtnShow"
              v-hasPermi="['security:alarmConfig:add']"
              style="margin-top: 10px"
              @click="addAlarmSet"
            ><i
              class="el-icon-plus"
            /></el-button>
          </el-row>
        </div>
        <div id="mapbox">
          <div id="map" :style="{ height: mapHeight, width: mapWidth }" />
          <div v-show="show4" class="fenceTable">
            <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="addDept()"
            >{{ $t("common.caddkey") }}{{show4}}</el-button>
            <el-table :data="fenceList" style="width: 100%">
              <!--多选框-->
              <el-table-column
                prop="fenceName"
                :label="$t('area.DepartmentArea')"
                width="180"
              />
              <!--操作-->
              <el-table-column :label="$t('operating.operating')" width="120">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleOneDelete(scope.$index, scope.row)"
                  >{{ $t("operating.delete") }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="positiondiv"><span /></div>
          <div class="scalediv"><span /></div>
        </div>
      </el-tab-pane>

      <el-tab-pane :label="$t('operating.tabularMode')" name="tableSecond">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
        >
          <el-form-item :label="$t('alarm.AlarmName')" prop="name">
            <el-input
              v-model="queryParams.param.name"
              size="small"
              :placeholder="$t('common.ckeyword')"
              style="width: 240px"
              :clearable="true"
              @change="clearName"
            />
          </el-form-item>

          <el-form-item :label="$t('alarm.alarmStatus')" prop="enable">
            <el-select
              v-model="queryParams.param.enable"
              :placeholder="$t('operating.pleaseChosen')"
              style="width: 120px"
              size="small"
              :clearable="true"
              @change="clearEnable"
            >
              <el-option
                v-for="item in inspectOpetions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              v-hasPermi="['system:configPolling:findPage']"
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >{{ $t("common.csearch") }}</el-button>
            <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
              $t("common.creset")
            }}</el-button> -->
          </el-form-item>
        </el-form>

        <el-row
          :gutter="10"
          class="mb8"
          style="display: flex; align-items: center"
        >
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['security:inspect:delete']"
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multipleDel"
              @click="handleBitchDelete"
            >{{ $t("common.cdelete") }}</el-button>
          </el-col>
        </el-row>

        <el-table
          :data="alarmData"
          @selection-change="handleSelectionChange"
        >
          <!--多选框-->
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            prop="layerName"
            :label="$t('area.LayerName')"
            min-width="120"
          />
          <el-table-column
            prop="alarmName"
            :label="$t('alarm.AlarmName')"
            min-width="120"
          />
          <el-table-column
            prop="alarmType"
            :formatter="alarmTypeChange"
            :label="$t('alarm.alarmType')"
            min-width="120"
          />
          <el-table-column
            prop="fenceName"
            :label="$t('alarm.alarmFence')"
            min-width="120"
          />
          <!-- <el-table-column
            prop="resourceNames"
            :label="$t('alarm.AlarmObject')"
            min-width="180"
          /> -->
          <el-table-column :label="$t('inspection.pollingPerDept')" min-width="250">
            <template slot-scope="scope">
              <span
                :style="{
                  color: scope.row.resourceNames ? '#3286e8' : '#7db981',
                }"
              >
                {{
                  scope.row.resourceNames
                    ? scope.row.resourceNames
                    : scope.row.departmentNames
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="alarmTime"
            :formatter="reAlarmTime"
            :label="$t('alarm.AlarmTime')"
            min-width="150"
          />
          <el-table-column
            prop="cycle"
            :formatter="alarmCycle"
            :label="$t('alarm.AlarmCycle')"
            min-width="280"
          />
          <el-table-column
            key="enable"
            :label="$t('alarm.alarmStatus')"
            align="center"
            min-width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.enable == "1" ?$t('common.cenable') : $t('common.cdisable') }}
              <el-switch
                v-model="scope.row.enable"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('operating.operating')" width="180">
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['security:alarmConfig:edit']"
                mini="small"
                type="text"
                icon="el-icon-edit"
                @click="handleFenceAlarm(scope.$index, scope.row)"
              >{{ $t("operating.handle") }}</el-button>
              <el-button
                v-hasPermi="['security:alarmConfig:delete']"
                mini="small"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              >{{ $t("operating.delete") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getAlarmData"
        />
        <!-- <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[10, 25, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /> -->

      </el-tab-pane>
    </el-tabs>

    <!-- <el-row>
      <el-button @click="isShowStyle" class="changeBtn" type="primary"
        >{{ this.text }}<i class="al-icon-carweb-icon-"></i
      ></el-button>
    </el-row> -->

    <!--新增和编辑-->
    <el-dialog
      :title="$t('alarm.AlarmSet')"
      :visible.sync="editVisible"
      width="58%"
      center
      :before-close="handleClose"
      @close="closeDialogEdit"
    >
      <div>
        <el-form ref="form" label-width="120px">
          <!--告警名称-->
          <el-form-item :label="$t('alarm.AlarmName')">
            <el-input
              v-model="form.alarmName"
              style="width: 215px"
              maxlength="10"
              show-word-limit
            />
          </el-form-item>
          <!--告警时间-->
          <el-form-item :label="$t('alarm.AlarmTime')">
            <el-time-picker
              v-model="form.startTime"
              editable
              value-format="HH:mm"
              format="HH:mm"
              style="width: 120px"
              :placeholder="$t('operating.StartTime')"
            />
            <span>{{ $t("operating.line") }}</span>
            <el-time-picker
              v-model="form.endTime"
              editable
              value-format="HH:mm"
              style="width: 120px"
              format="HH:mm"
              :placeholder="$t('operating.EndTime')"
            />
          </el-form-item>

          <!--告警周期-->
          <el-form-item :label="$t('alarm.AlarmCycle')">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
            >{{ $t("operating.checkAll") }}</el-checkbox>
            <div style="margin: 10px 0" />
            <el-checkbox-group
              v-model="checkedWeeks"
              @change="handleCheckedWeekChange"
            >
              <el-checkbox v-for="week in weeks" :key="week" :label="week">{{
                week
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!--告警类型-->
          <el-form-item :label="$t('alarm.alarmType')">
            <el-select
              v-model="form.alarmType"
              filterable
              :placeholder="$t('operating.pleaseChosen')"
              style="max-width: 215px"
              @change="alarmTypeSelect"
            >
              <el-option label="none" value="undefined">none</el-option>
              <el-option
                v-for="item in alarmAllTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--绑定摄像头-->
          <el-form-item :label="$t('area.BindingCamera')" v-if="cameraList.length>0">
            <el-select
              v-model="cameraId"
              :multiple="true"
              filterable
              :placeholder="$t('Notice.bindingCamera')"
              style="max-width: 215px"
            >
              <el-option
                v-for="item in cameraList"
                :key="item.idx"
                :label="item.cameraName"
                :value="item.idx"
              />
            </el-select>
          </el-form-item>
          <!--告警对象-->
          <el-form-item v-if="peopleList" :label="AlarmObjectLabel">
            <el-radio-group v-model="radioType">
              <el-radio :label="true">{{ $t("alarm.byPerson") }}</el-radio>
              <el-radio :label="false">{{ $t("alarm.byDepartment") }}</el-radio>
              <el-radio :label="3">按群组</el-radio>
            </el-radio-group>
            <!-- 人员树 -->
            <tree-transfer
              v-show="radioType==true"
              :filter="true"
              open-all
              :filter-placeholder="$t('operating.pleaseWrite')"
              :title="$t('alarm.peopleTitle')"
              :from_data="peopleData"
              :to_data="toPeopleData"
              node-key="id"
              :default-checked-keys="defaultCheckedPeople"
              default-transfer
              :default-props="{ label: 'label' }"
              :placeholder="$t('Notice.keywordFiltering')"
              @addBtn="addPeople"
              @removeBtn="removePeople"
            />
            <!-- 部门树 -->
            <tree-transfer
              v-show="radioType==false"
              :filter="true"
              open-all
              :filter-placeholder="$t('operating.pleaseWrite')"
              :title="$t('alarm.deptTitle')"
              :from_data="deptData"
              :to_data="toDeptData"
              node-key="id"
              :default-checked-keys="defaultCheckedDept"
              default-transfer
              :default-props="{ label: 'label' }"
              :placeholder="$t('Notice.keywordFiltering')"
              @addBtn="addDept"
              @removeBtn="removeDept"
            />
          </el-form-item>
          <el-form-item v-show="radioType==3" label="群组">
            <el-select v-model="groupIds" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.groupId"
                :label="item.groupName"
                :value="item.groupId"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('alarm.AlarmMode')">
            <el-checkbox
              v-model="showRecord"
              :label="$t('alarm.report')"
              name="type"
            />
            <el-checkbox
              v-model="showAudio"
              :label="$t('alarm.Sound')"
              name="type"
              @change="showPrise1"
            />
            <el-checkbox
              v-model="showAlertor"
              :label="$t('alarm.AudibleAlarm')"
              name="type"
            />

          </el-form-item>

          <!-- 标签告警 -->
          <el-form-item :label="$t('alarm.tagAlarmLabel')">
            <el-row>
              <el-col :span="8">
                <el-checkbox
                  v-model="checkTagMotor"
                  :label="$t('alarm.motorLabel')"
                />
                <el-select v-show="checkTagMotor" v-model="motorConfigValue">
                  <el-option
                    v-for="item in selectMotorData"
                    :key="item.idx"
                    :value="item.idx"
                    :label="item.name"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-checkbox
                  v-model="checkTagBuzzer"
                  :label="$t('alarm.buzzerLabel')"
                />
                <el-select v-show="checkTagBuzzer" v-model="buzzerConfigValue">
                  <el-option
                    v-for="item in selectBuzzerData"
                    :key="item.idx"
                    :value="item.idx"
                    :label="item.name"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-checkbox
                  v-model="checkTagLED"
                  :label="$t('alarm.ledLabel')"
                />
                <el-select v-show="checkTagLED" v-model="ledConfigValue">
                  <el-option
                    v-for="item in selectLEDData"
                    :key="item.idx"
                    :value="item.idx"
                    :label="item.name"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item v-if="showAlertor" :label="$t('alarm.alertorList')">
            <el-select
              v-model="alertorId"
              :multiple="true"
              filterable
              :placeholder="$t('menuManage.pleaseChoose')"
              style="max-width: 215px"
            >
              <el-option
                v-for="item in alertorList"
                :key="item.idx"
                :label="item.name"
                :value="item.idx"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-if="showPrise">
            <el-upload
              class="upload-demo"
              :show-file-list="false"
              :before-upload="beforeupload"
              :expand-on-click-node="false"
              drag
              action=""
            >
              <el-button size="small" type="primary">{{
                $t("alarm.uploadBtn")
              }}</el-button>
              <div slot="tip" class="el-upload__tip">
                {{ $t("alarm.uploadDescription") }}
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item v-if="gatherOver" :label="$t('alarm.gatherOverName')">
            <el-input v-model="form.gatherOverNumber" style="width: 215px" />
          </el-form-item>
          <el-form-item label="是否启用短信">
            <el-switch v-model="showSms" @change="changesms" />

          </el-form-item>
          <!--是否启用邮箱-->
          <el-form-item :label="$t('alarm.mailEnable')">
            <el-switch v-model="emailEnable" @change="changeEmailEnable" />
            <el-input
              v-show="emailEnable"
              v-model="emailList"
              style="width: 215px"
              @blur="checkEmailFormat"
            />
          </el-form-item>
          <!--是否启用该任务-->
          <el-form-item :label="$t('operating.isEnable')">
            <el-switch
              v-model="switchVal"
              inactive-value="0"
              active-value="1"
              active-color="#ffc000"
              inactive-color="#dcdfe6"
              @change="isSwitch"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="closeDialog">{{ $t("operating.cancel") }}</el-button>
        <!-- <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  Load_Map,
  Load_Fence,
  _TransPixel,
  TagStyle,
  _dPR,
  _iMap,
  t,
  FenceLayer,
  FenceSource,
  Load_Camera,
  CameraSource,
  releaseFence,
  LoadTypeData,
  sendThis
} from '@/utils/iMap.js'

import { Select } from 'ol/interaction.js'
import treeTransfer from '@/components/TransferExtend' // 源码位置
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { baseUrl } from '@/utils/global.js'
import { listData } from '@/api/system/dict/data'
import {
  getMapTree,
  getMap,
  alarmFenceList,
  getAlertorLists,
  AlarmList,
  fenceOneAlarm,
  addAlarm,
  staffTrees,
  alarmDelete,
  getDeptTree,
  alarmEnable,
  getTableData,
  cameraLayerList
} from '@/api/cy.js'
import { listDept } from '@/api/system/dept'
import {
  listGroup

} from '@/api/system/group'
export default {
  components: { treeTransfer, Treeselect },
  data() {
    return {
      groupIds: [],
      options: [],
      value1: [],
      alarmAllTypes: [],
      activeName: 'mapFirst',
      weekDays: this.$t('alarm.cycle'),
      switchVal: '1', // 是否启用
      emailEnable: true, // 是否启用邮箱
      emailList: '',
      tableDataUrl: '',
      deptValue: '',
      color2: null, // ColorPicker 颜色选择器,无默认值；
      oldMapId: '',
      alarmData: [],
      mapList: [],
      alarmDataList: [], // 获取围栏告警信息数据
      fenceList: [],
      mapValue: null, // 选择的地图
      text: this.$t('operating.tabularMode'),
      show: '1', // 切换显示的页面
      show3: false,
      show4: false,
      // mapHeight: window.innerHeight - 230 + 'px', // 地图区域高度
      mapHeight: 780 + 'px',
      mapWidth: window.innerWidth + 'px',

      alertorList: [], // 声光报警器列表
      alertorId: [], // 选中的声光报警器列表
      cameraList: [],
      cameraId: [],
      alarmType: '',

      alarmId: '', // 告警Id
      file: new FormData(), // 音频文件

      showRecord: true,
      showAudio: '',
      showAlertor: false,
      showPrise: false,
      gatherOver: false,
      peopleList: true,
      showSms: false,
      /** ***************标签告警***************/
      checkTagMotor: false,
      checkTagBuzzer: false,
      checkTagLED: false,

      motorConfigValue: 0,
      selectMotorData: [],
      buzzerConfigValue: 0,
      selectBuzzerData: [],
      ledConfigValue: 0,
      selectLEDData: [],

      /** ***************标签告警***************/

      /** *******************表格相关*********************/
      tableHeight: window.innerHeight - 240,
      addBtnShow: false,
      editVisible: false, // 编辑框是否可见
      delVisible: false, // 删除框是否可见
      _select: null,
      editEnable: true, // 点击的编辑or添加
      // 用户表单提交
      form: { startTime: '00:00', endTime: '23:59' },

      //  **************告警周期相关参数**************  //
      checkAll: false,
      weeks: this.$t('alarm.cycle'),
      checkedWeeks: this.$t('alarm.defaultChecked'),
      isIndeterminate: true,

      //  **************树形穿梭框相关参数**************  //
      peopleData: [], // 人员列表
      toPeopleData: [], // 已选人员
      toPeopleDataTwo: [],
      defaultCheckedPeople: [], // 默认选择人员

      // 部门
      deptData: [], // 部门列表
      toDeptData: [], // 已选部门
      toDeptDataTwo: [],
      defaultCheckedDept: [], // 默认选择部门

      fenceId: 0, // 选中的围栏id
      selectFeature: '', // 选中围栏
      selectPointerMove: null,
      radioType: true, // 按照人员还是按照部门显示
      AlarmObjectLabel: '',
      currentPage: 1, // 当前所在页
      total: 0, // 总页数
      multipleDel: true, // 批量删除
      selectIdx: [], // 选中要删除的idx
      queryParams: {
        pageNum: this.currentPage,
        pageSize: 10,
        // columnFilters: { fenceType: { name: 'fenceType', value: 'alarm' }},
        param: {
          name: undefined,
          enable: undefined
        }
        // columnFilters: { fenceType: { name: 'fenceType', value: 'polling' }}
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 100,
        // columnFilters: { fenceType: { name: 'fenceType', value: 'alarm' }},
        param: {
          name: undefined,
          enable: undefined
        }
        // columnFilters: { fenceType: { name: 'fenceType', value: 'polling' }}
      },
      inspectOpetions: [
        // { label: '所有', value: 'all' },
        { label: this.$i18n.t('common.cenable'), value: '1' },
        { label: this.$i18n.t('common.cdisable'), value: '0' }
      ],
      queryAlarm: {
        dictType: 'alarm_type',
        status: '0'
      }
    }
  }, // 注册树形穿梭框组件

  mounted() {
    this.queryalarmList()
    this.AlarmObjectLabel = this.$t('alarm.AlarmObject')
    // 动态设置map的高度
    // 首先在DOM渲染数据时，设置map的高度
    this.windowRefresh()
    // 然后监听window的resize事件，在浏览器窗口变化时再设置下map的高度
    const self = this
    window.onresize = function temp() {
      self.windowRefresh()
    }

    this.init()

    // this.getDeptTree()
    this.getAlarmConfigData()
    this.getgroup()
  },
  methods: {

    closeDialogEdit() {
      this.editVisible = false
      this.editTableVisible = false
      this.toPeopleData = []
      this.defaultCheckedPeople = []
      this.toDeptData = []
      this.defaultCheckedDept = []
      this.fenceSelect()
      this.staffTree()
      this.getDeptList()
    },
    handleClose(done) {
      // this.closeDialog()
      done()
    },

    getgroup() {
      listGroup(this.addDateRange(this.queryParams1)).then((response) => {
        this.options = response.data
      })
    },
    queryalarmList() {
      listData(this.queryAlarm).then((response) => {
        this.alarmAllTypes = this.Dictionary(response.rows)
      })
    },

    clearEnable(e) {
      if (!e) {
        delete this.queryParams.param.enable
      }
    },
    clearName(e) {
      if (!e) {
        delete this.queryParams.param.name
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.currentPage = 1
      this.getAlarmData()
    },

    /** 重置搜索操作 */
    resetQuery() {
      this.queryParams.param.name = undefined
      this.queryParams.param.enable = undefined
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 用户状态修改
    handleStatusChange(row) {
      this.$confirm(this.$i18n.t('common.cstatus'), this.$i18n.t('common.cwarn'), {
        confirmButtonText: this.$i18n.t('common.cok'),
        cancelButtonText: this.$i18n.t('common.ccancel'),
        type: 'warning'
      }).then(() => {
        return alarmEnable({ 'idx': row.idx, 'enable': row.enable })
        // return addAlarm(row)
      }).then((res) => {
        this.msgSuccess(res.msg)
      }).catch(() => {
        row.enable = row.enable === '0' ? '1' : '0'
      })
    },
    // 切换tab选项卡
    handleClick(tab, event) {
      if (this.activeName == 'mapFirst') {
        if (this.mapList.length > 0) {
          if (this.mapValue == undefined || this.mapValue == null) {
            this.mapValue = this.mapList[0].id
          }
        }
        if (this.fenceId != 0) {
          this.handleMapChange()
        }
        this.addBtnShow = false
        this.alarmDataList = []
      }
    },

    // 初始化函数
    init() {
      // 加载地图树
      getMapTree().then((res) => {
        this.mapList = res.data
        if (this.mapList.length > 0) {
          this.mapValue = this.mapList[0].id
          // 初始化地图
          this.initMap()
        }
      })

      // 执行获取表格中json数据的函数
      this.getAlarmData()
      this.staffTree()
      // this.deptTree()
      this.getDeptList()
    },

    changeEmailEnable(val) {},
    changesms(val) {},
    // 获取告警等级配置
    getAlarmConfigData() {
      getTableData({ type: 'motor' }).then((res) => {
        const RES = this.responseUse(res)
        this.selectMotorData = RES
      })

      getTableData({ type: 'buzzer' }).then((res) => {
        const RES = this.responseUse(res)
        this.selectBuzzerData = RES
      })

      getTableData({ type: 'led' }).then((res) => {
        const RES = this.responseUse(res)
        this.selectLEDData = RES
      })
    },

    checkEmailFormat(event) {
      // 定义正则表达式的变量:邮箱正则
      var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if (this.emailList != '' && this.emailList.search(reg) != -1) {} else {
        this.v_MyMessage(this.$i18n.t('common.cmailError'), 'error')
      }
    },

    // 刷新窗口
    windowRefresh() {
      this.mapHeight = window.innerHeight - 130 + 'px'
      this.mapWidth = window.innerWidth + 'px'
      this.tableHeight = window.innerHeight - 250
    },

    // 告警设置Dialog打开动画结束之后的回调
    alartSetDialogOpened() {
      this.alarmTypeSelect()
    },

    // 重置表格显示格式
    // 巡检周期格式
    alarmCycle(row, column) {
      const stringWeek = []
      if (row.cycle) {
        const cycleArr = row.cycle.split(',')
        for (let j = 0; j < cycleArr.length; j++) {
          if (cycleArr[j] == 1) {
            stringWeek.push(this.weeks[j])
          }
        }
        if (stringWeek.length > 0) {
          return stringWeek.join('，')
        } else {
          return this.$i18n.t('common.cnone')
        }
      }
    },
    // 巡检时间格式
    reAlarmTime(row, column) {
      return row.timeStart + '-' + row.timeEnd
    },
    alarmTypeChange(row, column) {
      for (let i = 0; i < this.alarmAllTypes.length; i++) {
        if (this.alarmAllTypes[i].value === row.alarmType) {
          return this.alarmAllTypes[i].label
        }
      }
    },
    // 获取告警任务列表
    getAlarmData() {
      var paramObj = JSON.parse(JSON.stringify(this.queryParams))
      if (paramObj.param.hasOwnProperty('enable')) {
        paramObj.param.enable = parseInt(paramObj.param.enable)
      }
      AlarmList(paramObj).then((result) => {
        // const RES = result.data
        if (result.code === 200) {
          if (result.rows.length === 0 && result.total > 0) {
            this.queryParams.pageNum = 1
            this.getAlarmData()
            return
          }
          this.total = result.total
          result.rows.map(item => {
            item.enable = item.enable.toString()
          })
          this.alarmData = result.rows
        }
      })
    },

    staffTree(defaultData) {
      staffTrees().then((res) => {
        this.peopleData = res.data
        if (defaultData && defaultData.length > 0) {
          this.defaultCheckedPeople = defaultData
        }
      })
    },
    // deptTree(defaultData) {
    //   getDeptTree().then((res) => {
    //     // let RES = this.responseUse(res);
    //     this.deptData = res.data
    //     if (defaultData && defaultData.length > 0) {
    //       this.defaultCheckedDept = defaultData
    //     }
    //   })
    // },

    // 获取部门列表数据
    // getDeptTree() {
    //   getDeptTree().then((res) => {
    //     // let RES = this.responseUse(res);
    //     this.deptData = res.data
    //     console.log(this.deptData)
    //   })
    // },

    // 最新部门能组织
    getDeptList(defaultData) {
      listDept().then((item) => {
        item.data.map((res) => {
          res.label = res.deptName
          res.disabled = false
          res.id = res.deptId
          res.pid = res.parentId
        })
        this.deptData = this.handleTree(item.data, 'deptId')
        if (defaultData && defaultData.length > 0) {
          this.defaultCheckedDept = defaultData
        }
      })
    },

    // 重置表格显示格式
    // 所有围栏列表
    fenceListSave(row, column) {
      const fenceArr = []
      if (row.fenceList) {
        for (let j = 0; j < row.fenceList.length; j++) {
          fenceArr.push(row.fenceList[j].fenceName)
        }
        return fenceArr.join('，')
      }
    },
    closeDialog() {
      _iMap.removeInteraction(this.selectPointerMove)
      this.editVisible = false
      this.editTableVisible = false
      this.fenceSelect()
      this.staffTree()
      // this.deptTree()
      this.getDeptList()
    },
    // 初始化默认地图
    initMap() {
      Load_Map(
        'https://scpic.chinaz.net/files/pic/pic9/202105/hpic3963.jpg',
        67.65,
        54.16,
        1600,
        1280,
        1600 / 67.65,
        [-60, -30]
      )
      sendThis(this)
      LoadTypeData()
      // getMap(this.mapValue).then((result) => {
      //   const RES = result.data
      //   this.mapName = RES.mapName
      //   // if (RES.mapPath) {
      //   Load_Map(
      //     baseUrl + '/file/' + RES.mapPath,
      //     RES.mapActualX,
      //     RES.mapActualY,
      //     RES.mapPixelX,
      //     RES.mapPixelY,
      //     RES.mapPixelX / RES.mapActualX,
      //     [RES.mapOriginX, RES.mapOriginY]
      //   )
      //   this.Geo =
      //         '/system/fenceInfo/findListByFenceTypeGeoJson?fenceType=alarm&layerId=' +
      //         this.mapValue
      //   releaseFence()
      //   Load_Fence(this.Geo)

      //   this.fenceSelect()

      //   this.getCameraList(this.mapValue)
      //   this.getAlertorList(this.mapValue)
      // } else {
      //   this.msgError(this.$i18n.t('common.caddPic'))
      // }
      // })
    },

    // 切换图层
    handleMapChange() {
      this.clearSelect()
      this.selectPointerMove = null
      _iMap.removeInteraction(this.selectPointerMove)
      if (this.mapValue == '' || this.mapValue == null) {
        // this.v_MyMessage(this.$t('Notice.mapIDIsEmpty'), 'error')
        return false
      } else {
        if (this.oldMapId != this.mapValue) {
          getMap(this.mapValue).then((result) => {
            const RES = result.data
            this.mapName = RES.mapName
            // if (RES.mapPath) {
            Load_Map(
              baseUrl + '/file/' + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY]
            )
            this.Geo =
              '/system/fenceInfo/findListByFenceTypeGeoJson?fenceType=alarm&layerId=' +
              this.mapValue
            releaseFence()
            Load_Fence(this.Geo)

            this.fenceSelect()

            this.getCameraList(this.mapValue)
            this.getAlertorList(this.mapValue)
            // } else {
            //   this.msgError(this.$i18n.t('common.caddPic'))
            // }
          })
        }
      }
    },
    getCameraList(data) {
      cameraLayerList(data).then((res) => {
        const RES = this.responseUse(res)
        this.cameraList = RES
      })
    },
    // 获取声光报警器列表
    getAlertorList(data) {
      this.alertorList = []
      getAlertorLists(data).then((res) => {
        const RES = this.responseUse(res)
        for (let i = 0; i < RES.length; i++) {
          if (RES[i].layerId == this.mapValue) {
            this.alertorList.push(RES[i])
          }
        }
      })
    },
    // 清空选择
    clearSelect() {
      if (this.selectPointerMove) {
        this.selectPointerMove.getFeatures().clear()
        this.addBtnShow = false
        this.alarmDataList = []
      }
    },
    //  选择围栏
    fenceSelect() {
      const self = this
      self.selectPointerMove = new Select()
      _iMap.addInteraction(self.selectPointerMove)
      self.selectPointerMove.on('select', function(e) {
        if (e.selected.length > 0) {
          // 鼠标移入，选择了一个，大概是mouseover事件
          if (e.selected[0].get('type') == 'Fence') {
            e.selected.forEach(function(f) {
              self.addBtnShow = true
              self.fenceId = f.get('id')
              self.getFenceAlarm(self.fenceId)
            })
          }
        } else {
          // 隐藏添加按钮，清除表格数据，重置围栏ID变量
          self.addBtnShow = false
          self.alarmDataList = []
          self.fenceId = 0
        }
      })
    },

    getFenceAlarm(fenceId) {
      alarmFenceList(fenceId).then((res) => {
        this.alarmDataList = res.data
      })
    },

    // 阻止upload的自己上传，进行再操作
    beforeupload(file) {
      const fileNameArr = file.name.split('.')
      const typeName = fileNameArr[fileNameArr.length - 1].toLocaleLowerCase()
      if (typeName != 'mp3' && typeName != 'wav') {
        this.$message('上传文件只能是 mp3、wav格式!')
        return false
      }
      this.file.append('file', file)
      return false
    },
    // 是否上传音频
    showPrise1() {
      if (this.showAudio) {
        this.showPrise = true
      } else {
        this.showPrise = false
      }
    },
    alarmTypeSelect() {
      if (this.form.alarmType === 'gatherOver') {
        this.gatherOver = true
        this.peopleList = false
      } else {
        this.gatherOver = false
        this.peopleList = true
      }

      // 检测是否为非法进入
      if (this.form.alarmType === 'alarmIn') {
        this.AlarmObjectLabel = this.$t('alarm.NoAlarmObject')
      } else {
        this.AlarmObjectLabel = this.$t('alarm.AlarmObject')
      }
    },
    // 添加新的围栏告警信息
    addAlarmSet() {
      this.editVisible = true
      this.editEnable = true
      this.isIndeterminate = true
      this.form = { startTime: '00:00', endTime: '23:59' }
      this.checkedWeeks = this.$t('alarm.defaultChecked')
      this.toPeopleData = []
      this.toPeopleDataTwo = []
      this.defaultCheckedPeople = []

      this.toDeptData = []
      this.toDeptDataTwo = []

      this.defaultCheckedDept = []

      this.alertorId = []
      this.cameraId = []
      this.switchVal = '1'

      this.emailEnable = false
      this.emailList = ''
      this.showRecord = true
      this.showPrise = false
      this.gatherOver = false

      this.motorConfigValue = 0
      this.buzzerConfigValue = 0
      this.ledConfigValue = 0
      this.staffTree()
      this.getDeptList()
    },

    // 修改告警信息
    handleFenceAlarm(index, row) {
      const self = this
      self.fenceId = row.fenceId
      const obj = {}
      obj.startTime = ''
      obj.endTime = ''
      self.checkedWeeks = []
      self.editEnable = false
      self.isIndeterminate = true
      self.alarmId = row.idx

      self.toPeopleDataTwo = []
      self.toPeopleData = []

      self.toDeptDataTwo = []
      self.toDeptData = []
      self.defaultCheckedPeople = []
      self.defaultCheckedDept = []

      fenceOneAlarm(row.idx).then((result) => {
        const RES = result.data

        // let RES = self.responseUse(res);
        self.getCameraList(RES.layerId)
        self.getAlertorList(RES.layerId)

        self.editVisible = true

        if (RES.personnelList) {
          // const arrList = RES.personnelList.split(',') // 更新人员列表信息
          // self.defaultCheckedPeople = arrList
          self.staffTree(RES.personnelList.split(','))
          self.radioType = true
        } else {
          self.staffTree()
        }
        if (RES.departmentList) {
          //  self.defaultCheckedDept = RES.departmentList.split(',') // 更新部门列表信息
          // self.deptTree(RES.departmentList.split(','))
          self.getDeptList(RES.departmentList.split(','))
          self.radioType = false
        } else {
          self.getDeptList()
        }
        if (RES.groupIds) {
          self.radioType = 3
        }
        obj.startTime = RES.timeStart
        obj.endTime = RES.timeEnd
        obj.alarmType = RES.alarmType
        obj.alarmName = RES.alarmName
        if (
          RES.gatherOverNumber !== '' &&
          RES.gatherOverNumber !== null &&
          RES.gatherOverNumber !== undefined
        ) {
          // 超员告警
          obj.gatherOverNumber = RES.gatherOverNumber
          self.gatherOver = true
          self.peopleList = false
        } else {
          self.gatherOver = false
          self.peopleList = true
        }
        if (
          RES.bandCameraList != '' &&
          RES.bandCameraList != null &&
          RES.bandCameraList != undefined
        ) {
          self.cameraId = RES.bandCameraList.split(',').map(Number)
        } else {
          self.cameraId = []
        }

        if (
          RES.alertorList != '' &&
          RES.alertorList != null &&
          RES.alertorList != undefined
        ) {
          self.alertorId = RES.alertorList.split(',').map(Number)
        } else {
          self.alertorId = []
        }

        self.form = obj
        self.checkedWeeks = []
        if (RES.cycle) {
          const cycleArr = RES.cycle.split(',')
          for (let j = 0; j < cycleArr.length; j++) {
            if (cycleArr[j] == 1) {
              self.checkedWeeks.push(self.weeks[j])
            }
          }
        }
        if (self.checkedWeeks.length == self.weekDays.length) {
          self.isIndeterminate = false
        }
        if (RES.enable == 1) {
          self.switchVal = '1'
        } else if (RES.enable == 0) {
          self.switchVal = '0'
        }

        // 是否启用邮箱
        if (RES.showEmail == '1') {
          self.emailEnable = true
          self.emailList = RES.emailList
        } else {
          self.emailEnable = false
          self.emailList = ''
        }
        if (RES.showSms == '1') {
          self.showSms = true
        } else {
          self.showSms = false
        }

        if (RES.showRecord == 1) {
          self.showRecord = true
        } else if (RES.showRecord == 0) {
          self.showRecord = false
        }

        // 声光报警器
        if (RES.showAlertor == 1) {
          self.showAlertor = true
        } else {
          self.showAlertor = false
        }

        if (RES.showAudio == 1) {
          self.showAudio = true
          self.showPrise = true
        } else if (RES.showAudio == 0) {
          self.showAudio = false
        }
        if (RES.showSms) {
          self.showSms = true
        } else {
          self.showSms = false
        }
        if (RES.groupIds) {
          self.groupIds = RES.groupIds
        } else {
          self.groupIds = ''
        }
        // 标签告警
        if (RES.tagAlarmMotorId && RES.tagAlarmMotorId !== 0) {
          self.checkTagMotor = true
          self.motorConfigValue = RES.tagAlarmMotorId
        }
        if (RES.tagAlarmBuzzerId && RES.tagAlarmBuzzerId !== 0) {
          self.checkTagBuzzer = true
          self.buzzerConfigValue = RES.tagAlarmBuzzerId
        }
        if (RES.tagAlarmLedId && RES.tagAlarmLedId !== 0) {
          self.checkTagLED = true
          self.ledConfigValue = RES.tagAlarmLedId
        }
      })
    },

    // 确认添加围栏告警信息
    saveEdit() {
      this.file = new FormData()
      const cycle = []
      for (let i = 0; i < this.weekDays.length; i++) {
        if (this.checkedWeeks.indexOf(this.weekDays[i]) > -1) {
          cycle.push(1)
        } else {
          cycle.push(0)
        }
      }
      let enable = ''
      if (this.switchVal == true) {
        enable = 1
      } else {
        enable = 0
      }

      let emailenable = ''
      if (this.emailEnable == true) {
        emailenable = '1'
      } else {
        emailenable = '0'
      }

      if (this.showRecord == true) {
        this.showRecord = 1
      } else {
        this.showRecord = 0
      }

      // 声光报警器
      if (this.showAlertor == true) {
        this.showAlertor = 1
      } else {
        this.showAlertor = 0
      }

      if (this.showAudio == true) {
        this.showAudio = 1
      } else {
        this.showAudio = 0
      }

      console.log((!this.form.alarmType) || this.form.alarmType === 'undefined', this.form.alarmType, '我去', this.form.startTime,
        this.form.endTime)

      var isDay = this.compareTime(
        this.form.startTime,
        this.form.endTime
      )
      if (isDay) {
        this.$message.info(this.$i18n.t('common.compareTime'))
        return
      }

      if (this.form.timeStart == '' || this.form.timeEnd == '') {
        this.v_MyMessage(this.$t('Notice.pleaseSelectTime'), 'error')
        return false
      }
      if ((!this.form.alarmType) || this.form.alarmType === 'undefined') {
        this.msgInfo(this.$i18n.t('common.calarmType'))
        return
      }
      if (this.form.alarmName == undefined || this.form.alarmName == '') {
        this.msgInfo(this.$i18n.t('common.cname'))
        return
      }

      this.file.append('alarmType', this.form.alarmType)
      this.file.append('alarmName', this.form.alarmName)

      this.file.append('timeStart', this.form.startTime)
      this.file.append('timeEnd', this.form.endTime)
      this.file.append('cycle', cycle.join(','))
      this.file.append('bandCameraList', this.cameraId + '')
      this.file.append('enable', enable)
      this.file.append('fenceId', this.fenceId)
      this.file.append('showRecord', this.showRecord)
      this.file.append('showAlertor', this.showAlertor)
      if (this.showAlertor == 1) {
        this.file.append('alertorList', this.alertorId)
      }
      this.file.append('showAudio', this.showAudio)

      this.file.append('showEmail', emailenable)
      // 添加短信

      if (this.showSms == true) {
        this.showSms = 1
      } else {
        this.showSms = 0
      }
      this.file.append('showSms', this.showSms)
      if (this.emailEnable) {
        this.file.append('emailList', this.emailList)
      }
      // 添加groupIds
      this.file.append('groupIds', this.groupIds)

      if (this.radioType) {
        // 选择了人员列表
        this.file.append('personnelList', this.toPeopleDataTwo.join(','))
      } else {
        // 选择了部门列表
        this.file.append('departmentList', this.toDeptDataTwo.join(','))
      }

      // 检查是否有超员人数设置
      if (
        this.form.gatherOverNumber != null &&
        this.form.gatherOverNumber != undefined &&
        this.form.gatherOverNumber != ''
      ) {
        this.file.append('gatherOverNumber', this.form.gatherOverNumber)
      } else {
        this.file.append('gatherOverNumber', '')
      }

      // 标签告警配置**********************************************
      if (this.checkTagMotor) {
        this.file.append('tagAlarmMotorId', this.motorConfigValue)
      }

      if (this.checkTagBuzzer) {
        this.file.append('tagAlarmBuzzerId', this.buzzerConfigValue)
      }

      if (this.checkTagLED) {
        this.file.append('tagAlarmLedId', this.ledConfigValue)
      }

      if (!this.editEnable) {
        this.file.append('idx', this.alarmId)
      }
      addAlarm(this.file, {
        'Content-Type':
          'multipart/form-data;boundary = ' + new Date().getTime()
      }).then((res) => {
        const RES = this.responseUse(res, true)
        if (RES) {
          this.editVisible = false
          this.getAlarmData()
          this.toPeopleDataTwo = []
          this.toDeptDataTwo = []
          if (this.fenceId != 0) {
            this.getFenceAlarm(this.fenceId)
          }
        }

        this.file = new FormData()
      })
      // this.staffTree();
      // this.deptTree();
    },

    compareTime(t1, t2) {
      if (!(t1 && t2)) {
        this.$message.info(this.$i18n.t('common.notime'))
        return
      }
      const date = new Date()
      const a = t1.split(':')
      const b = t2.split(':')
      return (
        date.setHours(a[0], a[1]) > date.setHours(b[0], b[1]) ||
        date.setHours(a[0], a[1]) == date.setHours(b[0], b[1])
      )
    },

    // // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectIdx = selection.map((item) => {
        return { idx: item.idx }
      })
      this.single = selection.length != 1
      this.multipleDel = !selection.length
    },
    /**
     * 批量删除
     */
    handleBitchDelete() {
      this.deleteRow(this.$i18n.t('common.cdelTip'), this.selectIdx)
    },

    // 删除告警任务
    handleDelete(index, row) {
      this.selectIndex = index
      // 设置删除提示框为可见状态
      // this.delVisible = true;
      this.alarmId = row.idx
      this.deleteRow(this.$i18n.t('common.cdelTipItem') + row.alarmName, [
        { idx: row.idx }
      ])
    },
    deleteRow(delTip, delData) {
      this.$confirm(delTip, this.$i18n.t('common.cwarn'), {
        confirmButtonText: this.$i18n.t('common.cok'),
        cancelButtonText: this.$i18n.t('common.ccancel'),
        type: 'warning'
      })
        .then(() => {
          return alarmDelete(delData)
        })
        .then((response) => {
          this.msgSuccess(response.msg)
          setTimeout(() => {
            this.getAlarmData()
            this.getFenceAlarm(this.fenceId)
          }, 1500)
        })
    },

    // 分页导航
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getAlarmData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAlarmData()
    },
    // 是否全选
    handleCheckAllChange(val) {
      this.checkedWeeks = val ? this.weekDays : []
      this.isIndeterminate = false
    },
    handleCheckedWeekChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.weeks.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.weeks.length
    },
    // 监听穿梭框组件添加
    addPeople(from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes

      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          this.toPeopleDataTwo.push(objPeople[i].id)
        }
      }
    },

    // 监听穿梭框组件移除
    removePeople(from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes
      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          for (let k = 0; k < this.toPeopleDataTwo.length; k++) {
            if (objPeople[i].id == this.toPeopleDataTwo[k]) {
              this.toPeopleDataTwo.splice(k, 1)
            }
          }
        }
      }
    },

    addDept(from, to, obj) {
      const deptObj = obj.nodes
      for (let i = 0; i < deptObj.length; i++) {
        if (
          deptObj[i].children == undefined ||
          deptObj[i].children.length == 0
        ) {
          this.toDeptDataTwo.push(deptObj[i].deptId)
        }
      }
    },

    removeDept(from, to, obj) {
      const deptObj = obj.nodes
      for (let i = 0; i < deptObj.length; i++) {
        if (
          deptObj[i].children == undefined ||
          deptObj[i].children.length == 0
        ) {
          for (let k = 0; k < this.toDeptDataTwo.length; k++) {
            if (deptObj[i].deptId == this.toDeptDataTwo[k]) {
              this.toDeptDataTwo.splice(k, 1)
            }
          }
        }
      }
    },

    // 是否启用
    isSwitch(val) {
      console.log(val)
    },
    handleOneDelete(index, row) {
      this.selectIndex = index
      this.fenceList.splice(this.selectIndex, 1)
    }
  }
}
</script>
<style scoped>
/deep/ .el-form-item {
  margin-bottom: 10px;
}
/deep/ .el-table .cell {
  white-space: nowrap!important;
}
</style>
<style scoped>

/deep/ .vue-treeselect__control{
  height: 36px;
}
.upload-demo .el-button--primary {
  /*width: 82px !important;*/
  float: left !important;
}

.head span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  font-weight: 700;
}
.handle-box {
  background-color: #939e89;
  padding: 10px;
  margin-bottom: 10px;
  min-width: 950px;
}

.buttonRt {
  float: right;
}

.clear {
  clear: both;
}

.areaSelect {
  position: absolute;
  right: 10px;
  width: 242px;
  z-index: 2000;
  background: #4542420d;
  padding: 10px;
  border-radius: 12px;
}

span {
  margin-left: 0px;
  font-size: 13px;
}

.datalist {
  width: 100%;
  min-width: 1150px;
}

.fenceTable {
  width: 300px;
  background-color: #fff;
  position: fixed;
  z-index: 100;
  top: 325px;
  right: 0;
}

.crumbs {
  margin: 25px 0;
}

.changeBtn {
  width: 235px;
  margin-top: 5px;
  margin-right: 17px;
  z-index: 9999;
  float: right;
}

.changeBtn >>> i {
  font-size: 16px;
}

.vue-treeselect {
  display: inline-block;
  top: 8px;
}

.upload-demo .el-button--primary {
  float: left !important;
}

.upload-demo >>> .el-upload-dragger {
  height: 32px !important;
}

/* div#mapbox {
  margin: 10px 20px;
} */

#map >>> .ol-control.ol-zoom{
  left:0.5rem;
  top: 0.5rem;
  position: absolute;
}
#map >>> .ol-zoom.ol-unselectable.ol-control button {
    display: block;
    margin: 1px;
    padding: 0;
    color: #fff;
    font-size: 1.14em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    height: 1.375em;
    width: 1.375em;
    line-height: .4em;
    background-color: rgba(0,60,136,.5);
    border: none;
}

#map >>> .ol-rotate.ol-hidden {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .25s linear,visibility 0s linear .25s;
    transition: opacity .25s linear,visibility 0s linear .25s;
}

#map >>>.ol-control button {
    display: block;
    margin: 1px;
    padding: 0;
    color: #fff;
    font-size: 1.14em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    height: 1.375em;
    width: 1.375em;
    line-height: .4em;
    background-color: rgba(0,60,136,.5);
    border: none;
    border-radius: 2px;
}
</style>

